<template>
  <div class="wrapper">
    <h1>体检预约-登录</h1>
    <section>
      <div class="input-box">
        <i class="fa fa-user-o"></i>
        <input type="text" v-model="users.userId" placeholder="输入手机号" />
      </div>
      <div class="input-box">
        <i class="fa fa-lock"></i>
        <input type="password" v-model="users.password" placeholder="输入登录密码" />
      </div>
      <div class="reg-box">
        <p @click="toRegister">注册</p>
        <p>忘记密码？</p>
      </div>
      <div class="button-box" @click="login">登录</div>
    </section>

    <footer>
      <div>
        <div class="line"></div>
        <p>有疑问请联系客服</p>
        <div class="line"></div>
      </div>
      <p>4008-XXX-XXX</p>
    </footer>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue"; // Vue 响应式相关 API
import { useRouter } from "vue-router"; // Vue Router 路由工具
import { setSessionStorage } from "../common.js"; // 自定义的本地存储工具
import axios from "axios"; // 网络请求库
axios.defaults.baseURL = "http://localhost:8082/tijian/";
import qs from "qs";
//设置 axios 的默认请求基础路径，后续所有请求都会拼接在该路径后（如请求 users/getUsersByUserIdByPass 实际会请求 http://localhost:8080/tijian/users/getUsersByUserIdByPass）。
export default {
  //（setup 函数）
  //setup 是 Vue 3 Composition API 的入口函数，所有组件逻辑都在这里实现。
  setup() {
    const router = useRouter(); // 获取路由实例，用于页面跳转

    const state = reactive({
      users: {
        userId: '', // 存储用户输入的手机号（或用户ID）
        password: '' // 存储用户输入的密码
      }
    });
    //useRouter()：获取路由实例，用于后续页面跳转
    //reactive()：创建响应式对象 state，其中 users 包含登录表单的两个字段（userId 和 password）

    function login() {
      // 1. 表单验证
      if (state.users.userId === '') {
        alert('手机号码不能为空！');
        return; // 验证失败则终止函数
      }
      if (state.users.password === '') {
        alert('密码不能为空！');
        return;
      }

      // 2. 发送登录请求
      axios.post('UserController/getUsersByUserIdByPass', qs.stringify(state.users))
        .then((response) => {
          // 3. 处理响应结果
          let users = response.data; // 后端返回的用户数据
          if (users !== '') {
            // 登录成功：存储用户信息到 sessionStorage 并跳转到首页
            setSessionStorage('users', users);
            router.push('/index');
          } else {
            // 登录失败：提示账号或密码错误
            alert('手机号码或密码不正确！');
          }
        })
        .catch((error) => {
          // 捕获请求异常（如网络错误）
          console.error(error);
        });
    }

    function toRegister() {
      router.push('/register');
    }

    return {
      ...toRefs(state), // 将响应式对象 state 转换为 ref 并解构，供模板使用
      login, // 暴露登录方法
      toRegister // 暴露跳转到注册页的方法
    };
    //toRefs(state)：将 reactive 对象的属性转换为 ref 类型，确保在模板中使用时保持响应性
    //暴露的 login、toRegister 方法可在模板中通过事件绑定（如 @click="login"）调用
  },
};
</script>


<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, #266c9f, #266c9f, #7eb059);
  overflow: hidden;
}

/*********************** 标题部分 ***********************/
h1 {
  text-align: center;
  color: #fff;
  font-size: 9.5vw;
  font-weight: 500;
  margin-top: 13vh;
  margin-bottom: 3vh;
}

/*********************** 内容部分 ***********************/
section {
  width: 86vw;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 2.4vw;

  box-sizing: border-box;
  padding: 6vw;
}

section .input-box {
  width: 100%;
  height: 12vw;
  border: solid 1px #ccc;
  border-radius: 2vw;
  margin-top: 5vw;

  display: flex;
  align-items: center;
}

section .input-box i {
  margin: 0 3.6vw;
  font-size: 5.4vw;
  color: #ccc;
}

section .input-box input {
  border: none;
  outline: none;
}

section .reg-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 5vw;
  margin-bottom: 2vw;
}

section .reg-box p {
  font-size: 3.3vw;
  color: #2d727e;
  user-select: none;
  cursor: pointer;
}

section .button-box {
  width: 100%;
  height: 13vw;
  border-radius: 2vw;
  background-color: #70b0bc;

  text-align: center;
  line-height: 13vw;
  font-size: 4.6vw;
  color: #fff;
  letter-spacing: 1vw;

  user-select: none;
  cursor: pointer;
}

/*********************** footer部分 ***********************/
footer {
  width: 86vw;
  margin: 0 auto;
  margin-top: 12vw;
  font-size: 3.8vw;
  color: #fff;
}

footer div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

footer div .line {
  width: 22vw;
  height: 1px;
  background-color: #fff;
}

footer>p {
  text-align: center;
  margin-top: 2vw;
}
</style>